<template>
  <div class="layout-wrapper">
    <!-- 标题栏 -->
    <header class="mainapp-header">
      <h1>vite+vue+qiankun</h1>
      <div style="user">{{ userInfo.name }}</div>
    </header>
    <div class="mainapp-main">
        <!-- 侧边栏 -->
        <ul class="mainapp-sidemenu">
          <li @click="push('/purehtml')">purehtml</li>
          <li @click="push('/micro-vue2')">micro-vue2</li>
          <li @click="push('/microVue3')">microVue3</li>
          <li @click="push('/microVue3/about')">microVue3-about</li>
          <!-- <li onclick="push('/vue2-main')">子主应用</li> -->
        </ul>
        <!-- 子页面容器 -->
        <div id="micro-container"></div>
    </div>
  </div>
</template>

<script>
import store from "./store";
export default {
  name: "App",
  data() {
    return {
    };
  },
  computed:{
    userInfo() {
      return store.getGlobalState('user');
    }
  },
  mounted() {
  },
  methods: {
    push(subapp) {
      history.pushState(null, subapp, subapp)
    }
  },


};
</script>

<style lang="scss">
html,
body {
  margin: 0 !important;
  padding: 0;
}
.layout-wrapper {
  width: 100%;
  height: 100%;
}

.mainapp-header {
  height: 80px;
  line-height: 80px;
  background: rgb(81, 134, 231);
  padding: 0px 30px;
  display: flex;
  justify-content: space-between;
  color: #fff;
  
  >h1 {
      color: #fff;
      font-size: 36px;
      font-weight: 700;
      margin: 0;
      // padding: 36px;
  }
  .user {
    
  }
}

.mainapp-main {
  display: flex;
  height: calc(100% - 80px);
  .mainapp-sidemenu {
    width: 130px;
    list-style: none;
    margin: 0;
    margin-left: 40px;
    padding: 0;
    border-right: 2px solid #aaa;
    height: 100%;
    // height: calc(100% - 80px);
    >li {
        color: #aaa;
        margin: 20px 0;
        font-size: 18px;
        font-weight: 400;
        cursor: pointer;

        &:hover {
            color: #444;
        }

        &:first-child {
            margin-top: 5px;
        }
    }
  }
  #micro-container {
    padding: 10px;
  }
}
</style>
